<template>
	<view>
		<view class="px-3 py-2 position-fixed top-0 wid100 box-b heade bg-white">
			<u-search :clearabled="false" placeholder="输入城市名" :showAction="false" v-model="keyword" @change="changeInput">
			</u-search>
		</view>
		<view class="" :style="{height:search_height+'px'}"></view>
		<view class="bg-f8 wid100 px-3 box-b flex align-center justify-between" style="height:88rpx;">
			<view class="flex align-center">
				<image src="../../static/search/chengshi.png" mode="" style="width:32rpx;height:32rpx;"></image>
				<text class="font-28 fwb ml-1" style="color: #2D3548;">城市</text>
			</view>
			<text></text>
		</view>

		<view v-for="(item,index) in searchData.city" :key="index" class="box-b wid100 px-3 py-3 align-center">
			<view class="flex flex-column" @tap="toDetail(item)">
				<text class="font-28 fw5 cl-36 mb-1"><text style="color:#FFAD41;">{{item.name}}</text></text>
				<text class="font-24 fw4 cl-77">{{item.english_name}}</text>
			</view>
		</view>

		<view class="bg-f8 wid100 px-3 box-b flex align-center justify-between" style="height:88rpx;">
			<view class="flex align-center">
				<image src="../../static/search/xuexiao.png" mode="" style="width:32rpx;height:32rpx;"></image>
				<text class="font-28 fwb ml-1" style="color: #2D3548;">学校</text>
			</view>
			<text></text>
		</view>


		<view v-for="(item,index) in searchData.school" :key="index" class="box-b wid100 px-3 py-3 align-center">
			<view class="flex flex-column"  @tap="schoolSearch(item)">
				<text class="font-28 fw5 cl-36 mb-1">{{item.title}}</text>
				<text class="font-24 fw4 cl-77">{{item.english_title}}</text>
			</view>
		</view>


		<view class="bg-f8 wid100 px-3 box-b flex align-center justify-between" style="height:88rpx;">
			<view class="flex align-center">
				<image src="../../static/search/gongyu.png" mode="" style="width:32rpx;height:32rpx;"></image>
				<text class="font-28 fwb ml-1" style="color: #2D3548;">公寓</text>
			</view>
			<text></text>
		</view>

		<view v-for="(item,index) in searchData.apartment" :key="index" class="box-b wid100 px-3 py-3 align-center">
			<view class="flex flex-column" @tap="toApartment(item)">
				<text class="font-28 fw5 cl-36 mb-1">{{item.title}}</text>
				<text class="font-24 fw4 cl-77">{{item.address}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				search_height: 0,
				searchData: {}
			}
		},
		onLoad() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.heade').boundingClientRect(data => {
				this.search_height = data.height
			}).exec()
			this.getData()
		},
		methods: {
			changeInput() {
				this.getData()
			},
			getData() {
				this.$H.post(this.$api.search, {
					keyword: this.keyword
				}, {
					token: false
				}).then(res => {
					console.log(res)
					this.searchData = res.data
				})
			},
			toApartment(item) {
				this.jump({
					url: `/pages/apartmentDetail/apartmentDetail?id=${item.id}`
				})
			},
			schoolSearch(item){
				uni.redirectTo({
					url: `/pages/search/searchDetail?schoolData=${encodeURIComponent(JSON.stringify(item))}`
				});
			},
			toDetail(item) {
				uni.redirectTo({
					url: `/pages/search/searchDetail?cityData=${encodeURIComponent(JSON.stringify(item))}`
				});
				// this.jump({
				// 	url: `/pages/search/searchDetail?cityData=${encodeURIComponent(JSON.stringify(item))}`
				// })
			}
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
